<%@include file="jspf/header.jspf" %>
<script>

    jQuery(document).ready(function() {
        drawTreeFromXML();
    });
    function loadXMLDoc(dname)
    {
        if (window.XMLHttpRequest)
        {
            xhttp=new XMLHttpRequest();
        }
        else
        {
            xhttp=new ActiveXObject("Microsoft.XMLHTTP");
        }
        xhttp.open("GET",dname,false);
        xhttp.send();
        return xhttp.responseXML;
    }    
    function drawNode(node)
    {
        var children = node.children;
        if (children.length === 0)
        {
            return "<li>" + node.getAttribute("name") + "<br/>" + node.getAttribute("type") + "</li>";
        }
        var tree = "<li>" + node.getAttribute("name") + "<br/>" + node.getAttribute("type") + "<ul>";
        for (var i = 0; i < children.length; i++)
        {
            tree += drawNode(children[i]);
        }
        tree += "</ul></li>";
        return tree;
    }
    function drawTreeFromXML()
    {
        var xmlDoc = loadXMLDoc("xtree.xml");
        var children = xmlDoc.children;
        for (var i = 0; i < children.length; i++)
        {
            var html = drawNode(xmlDoc.children[0]);
            html = "<ul id='sql_tree_"+ i + "' style='display:none;color:#fff;'>" + html + "</ul>";
            $("#tree_container").append(html);
            $("#sql_tree_" + i).jOrgChart({chartElement: '#tree_container'});
        }
        
    }
</script>
<div id="tree_container" style="padding:40px;">
    
    <ul id="org2" style="display:none;color:#fff;">
        <li>
            Food
            <ul>
                <li>Beer</li>
                <li>fff
                    <ul>
                        <li>aaa</li>
                        <li><a href="http://tquila.com" target="_blank">Aubergine</a></li>
                    </ul>
                </li>
                <li>Bread</li>
                <li>Chocolate
                    <ul>
                        <li>Topdeck</li>
                        <li>Reese's Cups</li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
    
</div>
<%@include file="jspf/footer.jspf" %>
